<template>
	<view class="login-page">
		<view class="login-container">
			<text class="title">欢迎登录</text>
			<view>
				<u-form
					ref="modelForm"
					label-position="left"
					:model="fmData"
					:rules="rules"
				>
					<u-form-item prop="userInfo.phoneNumber">
						<u-input
							v-model="fmData.phoneNumber"
							placeholder="请输入手机号"
							shape="circle"
						>
							<template #prefix>
								<text>+86</text>
							</template>
						</u-input>
					</u-form-item>

					<u-form-item prop="userInfo.phoneNumber">
						<u-input
							v-model="fmData.pwd"
							type="password"
							placeholder="请输入密码"
							shape="circle"
						>
						</u-input>
					</u-form-item>

					<view>
						<u-button
							shape="circle"
							type="primary"
							text="登录"
							@click="handleLogin"
						></u-button>

						<u-button
							shape="circle"
							type="primary"
							text="获取定位"
							@click="getPosition"
						></u-button>
					</view>
					<view>{{ addrInfo }}</view>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script setup name="Login">
import { reactive, ref } from 'vue';
import { getLocation } from '@/utils/getLocation';

const fmData = reactive({
	phoneNumber: '',
	pwd: '',
});
const rules = reactive({
	phoneNumber: {
		type: 'string',
		required: true,
		message: '请填写姓名',
		trigger: ['blur', 'change'],
	},
});

const addrInfo = ref({});

const getPosition = async () => {
	const res = await getLocation({ geocode: true });
	console.log(res, 'res');
	addrInfo.value = res;
};

const handleLogin = () => {
	uni.switchTab({
		url: '/pages/home/viewHome',
	});
};
</script>

<style scoped lang="scss">
.login-page {
	padding-top: 200px;
	.login-container {
		padding: 10px;
	}
}
</style>
